<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div v-if="pageflag" class="flex justify-center">
    <ul class="user_Overview flex" style="width: 1100px; visibility: hidden;">
      <li class="user_Overview-item">
        <div class="user_Overview_nums allnum">
          <p>物流交易总额</p>
          <div class="num animat">
            <span>{{ config.number.join('') | formatPrice }}</span><span class="ext">亿</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <Reacquire v-else @onclick="getData" line-height="200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';
let style = {
  textAlign: 'left',
  fontSize: 30,
  fontWeight: '100',
  fontFamily: 'YouSheBiaoTiHei',
};
export default {
  data() {
    return {
      options: {},
      userOverview: {},
      pageflag: true,
      timer: null,
      config: {
        number: [0],
        style: {
          ...style,
          fill: '#00A3FF',
        },
      },
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;

      this.config = {
        ...this.config,
        number: [10074],
      };
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.user_Overview {
  z-index: 1;

  li {
    flex: 1;

    p {
      margin-top: -80px;
      margin-left: -56%;
      text-align: center;
      width: 320px;
      height: 60px;
      font-size: 48px;
      line-height: 50px;
      color: #fff;
      // 混合模式
      mix-blend-mode: difference; // 与背景色差异混合
    }

    .user_Overview_nums {
      width: 150px;
      height: 110px;
      text-align: center;
      line-height: 110px;
      // font-family: YouSheBiaoTiHei;
      font-size: 22px;
      margin: 0px auto 5px;
      background-size: cover;
      background-position: center center;
      position: relative;
    }
  }
}

.num {
  color: #ffb507;
  font-size: 100px;
  font-family: 'YouSheBiaoTiHei';
  display: flex;
  justify-content: center;

  .ext {
    padding-top: -5px;
    padding-left: 5px;
    font-size: 110px;
  }
}
</style>
